<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2022-09-21 16:31:39
 * @LastEditTime: 2022-09-22 09:57:53
 * @LastEditors: Dxcr
-->
<template>
  <div class="changePipeline_container">
    <el-button ref="buttonRef" v-click-outside="onClickOutside">选择管道</el-button>
    <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" virtual-triggering placement="right-start">
      <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
    </el-popover>
  </div>
</template>
<script setup>
import { defineComponent, ref, unref, reactive, computed, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ClickOutside as vClickOutside } from 'element-plus';

const emit = defineEmits(['choose']);

const props = defineProps({
  treeData: {
    default() {
      return [];
    },
  },
});

const getRoute = useRoute();
const router = useRouter();
const data = reactive({});

const defaultProps = {
  children: 'children',
  label: 'name',
};

const buttonRef = ref();
const popoverRef = ref();

const handleNodeClick = data => {
  emit('choose', data.name);
};

const onClickOutside = () => {
  if (popoverRef && popoverRef.popperRef && popoverRef.popperRef.delayHide) {
    unref(popoverRef).popperRef.delayHide();
  }
};
onMounted(() => {
  visible: true;
});
</script>
<style lang="scss" scoped>
.changePipeline_container {
  position: absolute;
  top: 50px;
  left: 10px;
}
</style>
<style lang="scss" scoped>
.el-popper {
  padding: 10px 0px !important;
}
</style>
